<template>
    <div class="c-charts" >
        <div class="headline">
          预约情况统计
        </div>
        <IEcharts :option="pie"></IEcharts>
    </div>



</template>

<script>
    import vPageTitle from '../common/pageTitle.vue';
    import IEcharts from 'vue-echarts-v3';
    export default {
        components:{
            vPageTitle,IEcharts
        },
        data: () => ({
          pie:{
            tooltip : {
       trigger: 'axis',
       axisPointer : {            // 坐标轴指示器，坐标轴触发有效
           type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
       }
   },
   legend: {
       data: ['直接预约', '在线预约','到诊人数','未到诊人数']
   },
   grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
       containLabel: true
   },
   xAxis:  {
       type: 'value'
   },
   yAxis: {
       type: 'category',
       data: ['周一','周二','周三','周四','周五','周六','周日']
   },
   series: [
       {
           name: '直接预约',
           type: 'bar',
           stack: '总量',
           label: {
               normal: {
                   show: true,
                   position: 'insideRight'
               }
           },
           data: [320, 302, 301, 334, 390, 330, 320]
       },
       {
           name: '在线预约',
           type: 'bar',
           stack: '总量',
           label: {
               normal: {
                   show: true,
                   position: 'insideRight'
               }
           },
           data: [120, 132, 101, 134, 90, 230, 210]
       },
       {
           name: '到诊人数',
           type: 'bar',
           stack: '总量',
           label: {
               normal: {
                   show: true,
                   position: 'insideRight'
               }
           },
           data: [220, 182, 191, 234, 290, 330, 310]
       },
       {
           name: '未到诊人数',
           type: 'bar',
           stack: '总量',
           label: {
               normal: {
                   show: true,
                   position: 'insideRight'
               }
           },
           data: [150, 212, 201, 154, 190, 330, 410]
       },
   ]
          }
            }),

            methods: {


            }
    }
</script>

<style lang="less" scoped>
    .el-col{
    }
    .material-icons{
        font-size:80px;
        color:#ddd;
    }

    .cart-string{
        height:100px;
        padding-top:10px;
        font-size:1.1rem;

    }
    .c-charts{
        height:400px;
        width:100%;
        text-align: left;
        .headline{
          margin-bottom: 20px;
          font-weight: 800;
        }
    }

</style>
